/**
 * 学习目标：react - 挂载的生命周期
 * 1. constructor - 类似vue中的创建前后
 *      不建议发请求：1. 语义不好 2. 请求崩了会白屏
 * 2. render - 把页面准备好
 * 3. componentDidMount - 类似vue中的渲染完成
 *      场景： 1. 发送请求，2 DOM操作
 */
import React from 'react';

export default class App extends React.Component {
  // state = { count: 100 };
  // domRef = React.createRef()
  // 很久之前，按照es6中class的写法
  // constructor作用：继承父类，和定义自身属性
  // 不建议发请求：1. 语义不好 2. 请求崩了会白屏
  constructor() {
    // super,继承父类,并且把this指向当前class
    super();
    // 定义自身属性
    this.state = { count: 100 };
    this.domRef = React.createRef();
    console.log('constructor完成 -----> ');
  }

  componentDidMount() {
    console.log(
      'componentDidMount渲染完成 -----> ',
      document.querySelector('#dom')
    );
  }
  render() {
    console.log('render完成 -----> ', document.querySelector('#dom'));
    return <div id="dom">{this.state.count}</div>;
  }
}
